<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, text/html;charset=utf-8">

    <link rel="stylesheet"
          href="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>


    <style>
        th {
            border-bottom: 11px solid #d6d6d6;
        }
        tr {
            border-bottom: 11px solid #d6d6d6;
        }
        tr {
            background: #00ff00;
        }



    </style>
    <script type="text/javascript">

        function showApple(){
            alert("../img/apple.png");
        }
    </script>
</head>
<body>


<div data-role="page" id="pageone">


    <div data-role="header">
        <a href="#" class="ui-btn" data-rel="back">返回</a>
        <h1>欢迎来到我的主页</h1>
    </div>
    <h2>我的邮箱</h2>
    <ul data-role="listview" data-inset="true">
        <li><a href="#">收件箱<span class="ui-li-count">25</span></a></li>
        <li><a href="#">发件箱<span class="ui-li-count">432</span></a></li>
        <li><a href="#">垃圾箱<span class="ui-li-count">7</span></a></li>
    </ul>
    <div data-role="main" class="ui-content">
        <p>style css 设置字体</p>
        <li>
            <a href="#">
                <img src="../img/apple.png" onclick="showApple()">
                <h2 style="color:blue">Google Chrome </h2>
                <p><span style="color:green;">Google Chrome 是免费的开源 web 浏览器。发布于 2008年。</span></p>
                <p style="color:green;">Google Chrome 是免费的开源 web 浏览器。发布于 2008年。</p>
            </a>
            <a href="#">文本信息</a>
        </li>
    </div>
    <div data-role="main" class="ui-content">
        <p>点击查看table</p>
        <a href="#page6" data-transition="pop">点击查看table</a>
    </div>
    <div data-role="main" class="ui-content">
        <p>点击查看通讯录</p>
        <a href="#page5" data-transition="pop">点击查看通讯录</a>
    </div>

    <div data-role="main" class="ui-content">
        <p>点击链接查看列表</p>
        <a href="#page4" data-transition="pop">点击链接查看列表</a>
    </div>
    <div data-role="main" class="ui-content">
        <p>点击链接查看表格</p>
        <a href="#pagethree" data-transition="pop">点击链接查看表格</a>
    </div>

    <div data-role="main" class="ui-content">
        <p>点击链接查看窗口弹出效果。</p>
        <a href="#pagetwo" data-transition="fade">fade对话框页面</a>
    </div>
    <div data-role="main" class="ui-content">
        <p>点击链接查看窗口弹出效果。</p>
        <a href="#pagetwo" data-transition="pop">pop对话框页面</a>
    </div>
    <div data-role="main" class="ui-content">
        <p>点击链接查看窗口弹出效果。</p>
        <a href="#pagetwo" data-transition="flip">flip对话框页面</a>
    </div>

    <div data-role="main" class="ui-content">
        <p>点击链接查看窗口弹出效果。</p>
        <a href="#pagetwo" data-transition="flow">flow对话框页面</a>
    </div>
    <div data-role="main" class="ui-content">
        <p>点击链接查看窗口弹出效果。</p>
        <a href="#pagetwo" data-transition="slide">slide对话框页面</a>
    </div>
    <div data-role="main" class="ui-content">
        <p>点击链接查看窗口弹出效果。</p>
        <a href="#pagetwo" data-transition="slidefade">slidefade对话框页面</a>
    </div>

    <div data-role="main" class="ui-content">
        <p>点击链接查看窗口弹出效果。</p>
        <a href="#pagetwo" data-transition="slideup">slideup对话框页面</a>
    </div>
    <div data-role="main" class="ui-content">
        <p>点击链接查看窗口弹出效果。</p>
        <a href="#pagetwo" data-transition="slidedown">slidedown对话框页面</a>
    </div>
    <div data-role="main" class="ui-content">
        <p>点击链接查看窗口弹出效果。</p>
        <a href="#pagetwo" data-transition="turn">turn对话框页面</a>
    </div>
    <div data-role="main" class="ui-content">
        <p>点击链接查看窗口弹出效果。</p>
        <a href="#pagetwo" data-transition="none">none对话框页面</a>
    </div>

    <div data-role="main" class="ui-content">
        <p>点击链接查看窗口弹出效果。</p>
        <a href="#pagetwo" data-transition="slide" data-direction="reverse">slide对话框页面 reverse</a>
    </div>
    <div data-role="main" class="ui-content">
        <a href="#" class="ui-btn">按钮系列 </a>
        <a href="#" class="ui-btn ui-btn-b">黑色按钮</a>
        <a href="#" class="ui-btn ui-corner-all">圆角按钮</a>
        <a href="#" class="ui-btn ui-mini">mini按钮</a>
        <a href="#" class="ui-btn ui-shadow">阴影按钮</a>
    </div>
    <div data-role="main" class="ui-content">
        <div data-role="controlgroup" data-type="horizontal">
            <p>水平组合按钮:</p>
            <a href="#" class="ui-btn">按钮 1</a>
            <a href="#" class="ui-btn">按钮 2</a>
            <a href="#" class="ui-btn">按钮 3</a>
        </div>
        <br>

        <div data-role="controlgroup" data-type="vertical">
            <p>垂直组合按钮 (默认):</p>
            <a href="#" class="ui-btn">按钮 1</a>
            <a href="#" class="ui-btn">按钮 2</a>
            <a href="#" class="ui-btn">按钮 3</a>
        </div>
    </div>
    <div data-role="main" class="ui-content">
        <p>图标系列<span style="color:red;background:black"> </span></p>
    </div>
    <div data-role="controlgroup">
        <a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left">Search</a>
        <a href="#anylink" class="ui-btn ui-icon-arrow-l ui-btn-icon-left">left</a>
        <a href="#anylink" class="ui-btn ui-icon-arrow-r ui-btn-icon-right">right</a>
        <a href="#anylink" class="ui-btn ui-icon-delete ui-btn-icon-right">delete</a>
        <a href="#anylink" class="ui-btn ui-icon-home ui-btn-icon-left">home</a>
    </div>

    <div data-role="main" class="ui-content">
        <a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-top">顶部</a>
        <a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-right">右侧</a>
        <a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-bottom">底部</a>
        <a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left">左侧</a>
    </div>
    <div data-role="main" class="ui-content">
        <img src="../img/apple.png">
    </div>

    <div data-role="main" class="ui-content">
        <a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all">显示弹窗</a>
        <div data-role="popup" id="myPopup">
            <p>这是一个简单的弹窗</p>
        </div>
    </div>

    <div data-role="main" class="ui-content">
        <a href="#myPopup12" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all">显示弹窗</a>
        <div data-role="popup" id="myPopup12" class="ui-content">
            <a href="#" data-rel="back"
               class="ui-btn ui-corner-all ui-shadow ui-btn ui-icon-delete ui-btn-icon-notext ui-btn-right">关闭</a>
            <p>我在右上角有个关闭按钮</p>
            <p><b>提示:</b> 你也可以通过点击弹窗外的区域来关闭弹窗。</p>
        </div>
    </div>


    <div data-role="main" class="ui-content">
        <a href="#myPopup1" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all"
           data-position-to="window">弹窗窗口显示</a>
        <a href="#myPopup2" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all"
           data-position-to="#demo">弹窗显示在 id="demo" 元素上</a>
        <a href="#myPopup3" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all"
           data-position-to="origin">默认显示</a>

        <div data-role="popup" id="myPopup1" class="ui-content">
            <p>我显示在窗口的中间部分。</p>
        </div>
        <div data-role="popup" id="myPopup2" class="ui-content">
            <p>我显示在 id="demo" 的元素上。</p>
        </div>
        <div data-role="popup" id="myPopup3" class="ui-content">
            <p>我显示在点击的按钮上。</p>
        </div>

        <p>这是一个段落。</p>
        <p>这是另外一个段落。</p>
        <p>这还是一个段落。</p>
        <p>这是一个段落。这个段落包含了子元素：这是一个插入在段落中 id="demo" 的 <span id="demo"
                                                          style="color:red;">span style  </span>
            元素 。</p>
    </div>
    <div data-role="main" class="ui-content">
        <p><b>提示：</b> 如果要看到效果，则需要调整窗口大小使滚动条可用。</p>

        <p>
            可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.</p>

    </div>


    <div data-role="navbar">
        <ul>
            <li><a href="https:www.baidu.com">百度主页</a></li>
            <li><a href="#">第二页</a></li>
            <li><a href="#">第三页</a></li>
            <li><a href="#" class="ui-btn-active">搜索 class=ui-btn-active 属性显示当前的btn按钮被选中状态</a></li>
        </ul>
    </div>


    <div data-role="navbar">
        <ul>
            <li><a href="#" data-icon="plus">更多</a></li>
            <li><a href="#" data-icon="minus">更少</a></li>
            <li><a href="#" data-icon="delete">删除</a></li>
            <li><a href="#" data-icon="check">喜爱</a></li>
            <li><a href="#" data-icon="info">信息</a></li>
            <li><a href="#" data-icon="forward">向前</a></li>
            <li><a href="#" data-icon="back">向后</a></li>
            <li><a href="#" data-icon="star">星形</a></li>
            <li><a href="#" data-icon="gear">选项</a></li>
            <li><a href="#" data-icon="search">搜索</a></li>

        </ul>
    </div>

    <div data-role="main" class="ui-content">
        <div data-role="collapsible">
            <h1>点击我 - 我可以折叠！</h1>
            <p>我是可折叠的内容。</p>
            <div data-role="collapsible">
                <h1>点击我 - 我是嵌套的可折叠块！</h1>
                <p>我是嵌套的可折叠块中被展开的内容。</p>
            </div>
        </div>
    </div>

    <div data-role="main" class="ui-content">
        <div data-role="collapsible">
            <h1> collapsible 使用 配合h1生效</h1>
            <p>collapsible-1</p>
            <div data-role="collapsible">
                <h1> head</h1>
                <p>collapsible-2</p>
            </div>
        </div>
    </div>


    <div data-role="footer">
        <h1>底部文本</h1>
    </div>
</div>

<div data-role="page" data-dialog="true" id="pagetwo">
    <div data-role="header">
        <h1>我是一个对话框！</h1>
    </div>

    <div data-role="main" class="ui-content">
        <p>点击链接跳转到第一个页面。 <b>注意</b>: 淡入（fade）是默认的。</p>
        <a href="#pageone">跳转到第一个页面</a>
        <p><b>提示是：</b> 你可以通过点击顶部的 X 按钮来关闭对话框。它将自动过渡回前一个页面，与弹出的效果一致。</p>
    </div>
    <div data-role="footer">
        <h1>对话框底部文本</h1>
    </div>
</div>

<div data-role="page" id="pagethree">
    <div data-role="header">
        <h1>响应式布局</h1>
    </div>

    <div data-role="main" class="ui-content">
        <h3>慢慢重置窗口大小。布局会根据浏览器的宽度变化自适应大小。</h3>
        <div class="ui-grid-b ui-responsive">
            <div class="ui-block-a">
                <a href="#" class="ui-btn ui-corner-all ui-shadow">第一列按钮</a><br>
                <span>第一列: 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。</span>
            </div>
            <div class="ui-block-b">
                <a href="#" class="ui-btn ui-corner-all ui-shadow">第二列按钮</a><br>
                <span>第二列: 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。</span>
            </div>
            <div class="ui-block-c">
                <a href="#" class="ui-btn ui-corner-all ui-shadow">第三列按钮</a><br>
                <span>第三列: 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。</span>
            </div>
        </div>
    </div>
</div>

<div data-role="page" id="page4">
    <div data-role="main" class="ui-content">
        <h2>有序列表：</h2>
        <ol data-role="listview">
            <li><a href="https:www.baidu.com">列表项1--百度一下</a></li>
            <li><a href="#pagethree" data-transition="pop">列表项2--跳转到响应式布局 ui-grid-b</a></li>
            <li><a href="#">列表项3</a></li>
        </ol>
        <h2>无序列表：</h2>
        <ul data-role="listview" data-inset="true">
            <h1>添加列表的圆形角，设置属性 data-inset="true"</h1>
            <li data-role="list-divider"><a href="#">列表项1--设置数据的分隔符 list-divider</a></li>
            <li><a href="#">列表项2</a></li>
            <li><a href="#">列表项3</a></li>
        </ul>
    </div>
</div>

<div data-role="page" id="page5">
    <div data-role="main" class="ui-content">
        <h2>我的通讯录</h2>
        <ul data-role="listview" data-autodividers="true" data-inset="true">
            <li><a href="#">Adele</a></li>
            <li><a href="#">Agnes</a></li>
            <li><a href="#">Albert</a></li>
            <li><a href="#">Billy</a></li>
            <li><a href="#">Bob</a></li>
            <li><a href="#">Calvin</a></li>
            <li><a href="#">Cameron</a></li>
            <li><a href="#">Chloe</a></li>
            <li><a href="#">Christina</a></li>
            <li><a href="#">Diana</a></li>
            <li><a href="#">Gabriel</a></li>
            <li><a href="#">Glen</a></li>
            <li><a href="#">Ralph</a></li>
            <li><a href="#">Valarie</a></li>
            <li><a href="#">甲乙丙</a></li>
            <li><a href="#">乙丙</a></li>
            <li><a href="#">丙甲乙丙</a></li>
            <li><a href="#">丙甲</a></li>
            <li><a href="#">123</a></li>
            <li><a href="#">1234</a></li>
            <li><a href="#">223344</a></li>
        </ul>

        <h2>我的通讯录2</h2>
        <ol data-role="listview" data-autodividers="true" data-inset="true">
            <li><a href="#">Adele</a></li>
            <li><a href="#">Agnes</a></li>
            <li><a href="#">Albert</a></li>
            <li><a href="#">Billy</a></li>
            <li><a href="#">Bob</a></li>
            <li><a href="#">Calvin</a></li>
            <li><a href="#">Cameron</a></li>
            <li><a href="#">Chloe</a></li>
            <li><a href="#">Christina</a></li>
            <li><a href="#">Diana</a></li>
            <li><a href="#">Gabriel</a></li>
            <li><a href="#">Glen</a></li>
            <li><a href="#">Ralph</a></li>
            <li><a href="#">Valarie</a></li>
            <li><a href="#">甲乙丙</a></li>
            <li><a href="#">乙丙</a></li>
            <li><a href="#">丙甲乙丙</a></li>
            <li><a href="#">丙甲</a></li>
            <li><a href="#">123</a></li>
            <li><a href="#">1234</a></li>
            <li><a href="#">223344</a></li>
        </ol>
        <p>data-autodividers="true" 属性通过对列表项文本的首字母进行大写来创建分隔符。</p>
    </div>
</div>
<div data-role="page" id="page6">
    <div data-role="header">
        <h1>响应式布局</h1>
    </div>

    <div data-role="main" class="ui-contetn">


        <div data-role="main" class="ui-content">
            <p>回流模型表格在屏幕尺寸足够大时是水平显示，而在屏幕尺寸达到足够小时，所有的数据会变成垂直显示。</p>
            <p>重置窗口大小查看效果：</p>
            <table data-role="table" class="ui-responsive">
                <thead>
                <tr>
                    <th>CustomerID</th>
                    <th>CustomerName</th>
                    <th>ContactName</th>
                    <th>Address</th>
                    <th>City</th>
                    <th>PostalCode</th>
                    <th>Country</th>
                </tr>
                </thead>

                <tr>
                    <td>1</td>
                    <td>Alfreds Futterkiste</td>
                    <td>Maria Anders</td>
                    <td>Obere Str. 57</td>
                    <td>Berlin</td>
                    <td>12209</td>
                    <td>Germany</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Antonio Moreno Taquer</td>
                    <td>Antonio Moreno</td>
                    <td>Mataderos 2312</td>
                    <td>Mico D.F.</td>
                    <td>05023</td>
                    <td>Mexico</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>Around the Horn</td>
                    <td>Thomas Hardy</td>
                    <td>120 Hanover Sq.</td>
                    <td>London</td>
                    <td>WA1 1DP</td>
                    <td>UK</td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>Berglunds snabbk</td>
                    <td>Christina Berglund</td>
                    <td>Berguvsven 8</td>
                    <td>Lule</td>
                    <td>S-958 22</td>
                    <td>Sweden</td>
                </tr>
                </tbody>
            </table>
        </div>


        <div data-role="main" class="ui-content">
            <table data-role="table" data-mode="columntoggle" class="ui-responsive"
                   data-column-btn-text="点我显示或隐藏列" id="myTable">
                <thead>
                <tr>
                    <th data-priority="6">CustomerID</th>
                    <th>CustomerName</th>
                    <th data-priority="1">ContactName</th>
                    <th data-priority="2">Address</th>
                    <th data-priority="3">City</th>
                    <th data-priority="4">PostalCode</th>
                    <th data-priority="5">Country</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>1</td>
                    <td>Alfreds Futterkiste</td>
                    <td>Maria Anders</td>
                    <td>Obere Str. 57</td>
                    <td>Berlin</td>
                    <td>12209</td>
                    <td>Germany</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Antonio Moreno Taquer</td>
                    <td>Antonio Moreno</td>
                    <td>Mataderos 2312</td>
                    <td>Mico D.F.</td>
                    <td>05023</td>
                    <td>Mexico</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>Around the Horn</td>
                    <td>Thomas Hardy</td>
                    <td>120 Hanover Sq.</td>
                    <td>London</td>
                    <td>WA1 1DP</td>
                    <td>UK</td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>Berglunds snabbk</td>
                    <td>Christina Berglund</td>
                    <td>Berguvsven 8</td>
                    <td>Lule</td>
                    <td>S-958 22</td>
                    <td>Sweden</td>
                </tr>

                </tbody>
            </table>
        </div>

        <p>多行的三列布局:</p>
        <div data-role="main" class="ui-grid-b">
            <div class="ui-block-a" style="border:2px solid black;">ui-block-a</div>
            <div class="ui-block-a" style="border:2px solid black;">ui-block-a</div>
            <div class="ui-block-a" style="border:2px solid black;">ui-block-a</div>
            <div class="ui-block-a" style="border:2px solid black;">ui-block-a</div>
            <div class="ui-block-a" style="border:2px solid black;">ui-block-a</div>
            <div class="ui-block-a" style="border:2px solid black;">ui-block-a</div>
        </div>
        <p>多行的三列布局:</p>
        <div class="ui-grid-b">
            <div classe="ui-block-b"
                 style="border:2px solid #d6d6d6;border-bottom: 2px solid #d6d6d6;">
                ui-block-b
            </div>
            <div classe="ui-block-b"
                 style="border:2px solid #d6d6d6;border-bottom: 2px solid #d6d6d6;">
                ui-block-b
            </div>
        </div>
    </div>
</div>


</body>
</html>
